<template>
  <div class="project-list">
    <search @search="handleSearch" @reset="handleReset">
      <div style="display: flex">
        <SearchInput searchText="Project Name">
          <a-input v-model:value="projectName" />
        </SearchInput>
        <SearchInput searchText="Industry">
          <a-select
            v-model:value="industry"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in options.industryOptions" :key="item.id" :label="item.groupName">
              {{ item.groupName }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Source Language">
          <a-select
            v-model:value="sourceLanguage"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in options.sourceLanguageOptions" :key="item.id" :label="item.shortName">
              {{ item.shortName }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Target Language">
          <a-select
            v-model:value="targetLanguage"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in options.targetLanguageOptions" :key="item.id" :label="item.shortName">
              {{ item.shortName }}
            </a-select-option>
          </a-select>
        </SearchInput>
      </div>
      <div style="display: flex; margin-top: 16px">
        <SearchInput searchText="From">
          <a-select
            v-model:value="beginTime"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in options.fromList" :key="item.id" :label="item.value">
              {{ item.value }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="To">
          <a-select
            v-model:value="endTime"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in options.toList" :key="item.id" :label="item.value">
              {{ item.value }}
            </a-select-option>
          </a-select>
        </SearchInput>
      </div>
    </search>

    <e-container style="margin-top: 24px">
      <a-spin :spinning="loading" tip="Loading...">
        <div v-if="totalClients > 0" class="client-switch">
          <div class="left-jump" :class="currentClient === 1 ? 'disabled' : ''" @click="handlePrevJump">
            <StepBackwardOutlined />
          </div>
          <div class="prev" :class="currentClient === 1 ? 'disabled' : ''" @click="handlePrev">
            <left-outlined />
          </div>
          <div class="client">Client {{ currentClient }} of {{ totalClients }}</div>
          <div class="next" :class="currentClient === totalClients ? 'disabled' : ''" @click="handleNext">
            <RightOutlined />
          </div>
          <div class="right-jump" :class="currentClient === totalClients ? 'disabled' : ''" @click="handleNextJump">
            <StepForwardOutlined />
          </div>
        </div>
        <div class="project-list-main">
          <div class="project-list-main-title">
            <div class="client-type">Client Type : {{ listData[0]?.clientKindName }}</div>
            <div class="amount-area">
              <div class="project-amount">
                Project Amount : {{ listData[0]?.currencyName }}
                {{ listData[0]?.projectAmount ? listData[0]?.projectAmount.toFixed(2) : '0.00' }}
              </div>
              <div class="language-amount">
                Language Amount : {{ listData[0]?.currencyName }}
                {{ listData[0]?.langpairAmount ? listData[0]?.langpairAmount.toFixed(2) : '0.00' }}
              </div>
            </div>
          </div>
          <a-table :columns="columns" :data-source="listData[0]?.projectDetails" bordered :pagination="false">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'projectAmount'">
                {{ record.currencyName }} {{ record.projectAmount ? Number(record.projectAmount).toFixed(2) : '0.00' }}
              </template>
              <template v-if="column.key === 'langpairAmount'">
                {{ record.currencyName }}
                {{ record.langpairAmount ? Number(record.langpairAmount).toFixed(2) : '0.00' }}
              </template>
            </template>
            <template #emptyText>
              <e-empty>
                <template #description>
                  <div>No Data</div>
                </template>
              </e-empty>
            </template>
          </a-table>
        </div>
      </a-spin>
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { LeftOutlined, RightOutlined, StepBackwardOutlined, StepForwardOutlined } from '@ant-design/icons-vue'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import Search from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'
import { column } from './column.js'
import projectList from '@/api/projectList'

const columns = reactive(column)
const listData = ref([])

const projectName = ref('')
const industry = ref(0)
const sourceLanguage = ref(0)
const targetLanguage = ref(0)
const beginTime = ref('')
const endTime = ref('')
const totalClients = ref(0)
const currentClient = ref(1)
const loading = ref(false)
// 下拉信息
const options = reactive({
  industryOptions: [],
  sourceLanguageOptions: [],
  targetLanguageOptions: [],
  fromList: [],
  toList: []
})
projectList.getIndustryList().then(res => {
  if (res.code === 2000) {
    options.industryOptions = res.data
  }
})
projectList.getSLanguageList().then(res => {
  if (res.code === 2000) {
    options.sourceLanguageOptions = res.data
  }
})
projectList.getTLanguageList().then(res => {
  if (res.code === 2000) {
    options.targetLanguageOptions = res.data
  }
})
const getFromDate = () => {
  return new Promise(resolve => {
    projectList.getFromDateList().then(res => {
      if (res.code === 2000) {
        const oDate = new Date()
        const oYear = oDate.getFullYear()
        const fromDate = '' + oYear + '01'

        for (let i = 0; i < res.data.length; i++) {
          const obj = {}
          obj.id = res.data[i]
          obj.value = res.data[i]
          options.fromList = [...options.fromList, obj]
        }
        options.fromList.forEach(item => {
          if (item.value === fromDate) {
            beginTime.value = item.id
          }
        })
        resolve()
      }
    })
  })
}
const getEndDate = () => {
  return new Promise(resolve => {
    projectList.getToDateList().then(res => {
      if (res.code === 2000) {
        const oDate = new Date()
        const oYear = oDate.getFullYear()
        const fromDate = '' + oYear + '12'

        for (let i = 0; i < res.data.length; i++) {
          const obj = {}
          obj.id = res.data[i]
          obj.value = res.data[i]
          options.toList = [...options.toList, obj]
        }
        options.fromList.forEach(item => {
          if (item.value === fromDate) {
            endTime.value = item.id
          }
        })
        resolve()
      }
    })
  })
}

const handlePrev = () => {
  if (currentClient.value === 1) return
  loading.value = true
  currentClient.value -= 1
  getList()
}
const handleNext = () => {
  if (currentClient.value === totalClients.value) return
  loading.value = true
  currentClient.value += 1
  getList()
}
const handlePrevJump = () => {
  if (currentClient.value === 1) return
  loading.value = true
  currentClient.value = 1
  getList()
}
const handleNextJump = () => {
  if (currentClient.value === totalClients.value) return
  loading.value = true
  currentClient.value = totalClients.value
  getList()
}

const handleSearch = () => {
  currentClient.value = 1
  getList()
}
const handleReset = () => {
  currentClient.value = 1
  projectName.value = ''
  industry.value = 0
  sourceLanguage.value = 0
  targetLanguage.value = 0
  const oDate = new Date()
  const oYear = oDate.getFullYear()
  beginTime.value = '' + oYear + '01'
  endTime.value = '' + oYear + '12'
  getList()
}
/**
 * 获取列表
 */
const getList = () => {
  loading.value = true
  projectList
    .getQueryList({
      projectName: projectName.value.trim(),
      industryID: industry.value,
      sLangID: sourceLanguage.value,
      tLangID: targetLanguage.value,
      fromDate: beginTime.value,
      toDate: endTime.value,
      page: {
        pageRows: 1,
        pageIndex: currentClient.value,
        total: 0,
        sort: '',
        order: ''
      }
    })
    .then(res => {
      if (res.code === 2000) {
        listData.value = res.data
        totalClients.value = res.total
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}

onMounted(async () => {
  await getFromDate()
  await getEndDate()
  await getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_form';

.client-switch {
  height: 32px;
  display: flex;
  margin-bottom: 24px;
  .left-jump,
  .prev,
  .next,
  .right-jump {
    width: 32px;
    height: 100%;
    border: 1px solid @border-color;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #b9b9b9;
    font-size: 18px;
  }
  .prev {
    margin-left: 5px;
    font-size: 14px;
  }
  .next {
    margin-right: 5px;
    font-size: 14px;
  }
  .client {
    margin: 0 20px;
    padding: 0 20px;
    background-color: @bg-color;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: @black-85p;
    font-size: 14px;
  }
  .disabled {
    background-color: #f7f7f7;
  }
}
.project-list-main {
  width: 100%;
  &-title {
    width: 100%;
    height: 48px;
    background-color: @bg-color;
    border: 1px solid @border-color;
    box-sizing: border-box;
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #808c9f;
    .amount-area {
      display: flex;
      align-items: center;
      .project-amount {
        margin-right: 24px;
      }
    }
  }
}
:deep(.ant-table-thead) > tr > th,
:deep(.ant-table-tbody) > tr > td {
  font-size: 12px !important;
  color: @black-85p !important;
  padding: 0 12px !important;
  height: 40px !important;
}
:deep(.ant-table-thead) > tr > th {
  background-color: @milk !important;
  border-color: @border-color !important;
  color: #808c9f !important;
}
:deep(.ant-table-tbody) > tr:not(.table-striped) > td {
  border-color: @border-color !important;
}
</style>
<route lang="yaml">
name: Project List
path: '/project-list/'
meta:
  title: Project List
  roles: isSalesSupport
</route>
